<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灵感笔记 - 登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .glass-card {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .input-field {
            background: rgba(255, 255, 255, 0.05) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        .input-field:focus {
            border-color: rgba(99, 102, 241, 0.5) !important;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
        }

        .toggle-eye {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            user-select: none;
        }
    </style>
</head>

<body class="font-noto h-screen bg-gradient-to-br from-blue-900 via-purple-900 to-gray-900 relative overflow-hidden">
    <!-- 背景装饰元素 -->
    <div class="absolute inset-0 overflow-hidden">
        <div
            class="absolute top-20 left-20 w-64 h-64 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob">
        </div>
        <div
            class="absolute top-1/3 -right-20 w-96 h-96 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
        </div>
        <div
            class="absolute -bottom-20 left-1/3 w-72 h-72 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000">
        </div>
    </div>

    <!-- 登录容器 -->
    <div class="relative h-full flex items-center justify-center p-4">
        <div class="w-full max-w-md glass-card rounded-2xl shadow-2xl overflow-hidden">
            <!-- 顶部装饰 -->
            <div class="bg-gradient-to-r from-blue-600 to-purple-600 h-2"></div>

            <!-- 登录内容 -->
            <div class="p-8">
                <div class="text-center mb-10">
                    <div class="flex justify-center mb-4">
                        <i class="fas fa-pen-nib text-4xl text-white"></i>
                    </div>
                    <h1 class="text-3xl font-bold text-white mb-2">灵感笔记</h1>
                    <p class="text-gray-300">欢迎回来，请登录您的账户</p>
                </div>

                <!-- 登录表单 -->
                <form class="space-y-6">
                    <!-- 邮箱输入 -->
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-200 mb-1">邮箱地址</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-envelope text-gray-400"></i>
                            </div>
                            <input type="text" id="userName"
                                class="w-full pl-10 pr-4 py-3 rounded-lg input-field text-white placeholder-gray-400 focus:outline-none"
                                placeholder="请输入您的账号">
                        </div>
                    </div>

                    <!-- 密码输入 -->
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-200 mb-1">密码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-lock text-gray-400"></i>
                            </div>
                            <input type="password" id="password"
                                class="w-full pl-10 pr-4 py-3 rounded-lg input-field text-white placeholder-gray-400 focus:outline-none"
                                placeholder="请输入您的密码">
                            <div class="toggle-eye" id="togglePassword">
                                <i class="fas fa-eye-slash text-gray-400"></i>
                            </div>
                        </div>
                    </div>

                    <!-- 记住我和忘记密码 -->
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <input id="remember-me" type="checkbox"
                                class="w-4 h-4 text-purple-500 bg-transparent border-gray-400 rounded focus:ring-purple-500">
                            <label for="remember-me" class="ml-2 block text-sm text-gray-300">记住我</label>
                        </div>
                        <a href="#" class="text-sm text-purple-400 hover:text-purple-300 font-medium">忘记密码?</a>
                    </div>

                    <!-- 登录按钮 -->
                    <div>
                        <button type="button" class="w-full flex justify-center py-3 px-4 border border-transparent
                                 rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r 
                                 from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 
                                 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 
                                 transition-all duration-300 transform hover:scale-[1.02]" id="login" onclick="login">
                            登录系统
                        </button>
                    </div>
                </form>

                <!-- 分隔线 -->
                <div class="relative my-6">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t border-gray-700"></div>
                    </div>
                    <!-- <div class="relative flex justify-center text-sm">
                        <span class="px-2 bg-gray-900/80 text-gray-400">或继续使用</span>
                    </div> -->
                </div>

                <!-- 社交登录按钮 -->
                <!-- <div class="grid grid-cols-3 gap-3">
                    <button
                        class="w-full flex items-center justify-center py-2 px-4 rounded-lg bg-gray-800/50 hover:bg-gray-800/70 text-gray-300 transition-colors">
                        <i class="fab fa-weixin text-xl mr-2"></i>
                    </button>
                    <button
                        class="w-full flex items-center justify-center py-2 px-4 rounded-lg bg-gray-800/50 hover:bg-gray-800/70 text-gray-300 transition-colors">
                        <i class="fab fa-github text-xl mr-2"></i>
                    </button>
                    <button
                        class="w-full flex items-center justify-center py-2 px-4 rounded-lg bg-gray-800/50 hover:bg-gray-800/70 text-gray-300 transition-colors">
                        <i class="fab fa-qq text-xl mr-2"></i>
                    </button>
                </div> -->

                <!-- 注册链接 -->
                <div class="mt-6 text-center">
                    <p class="text-sm text-gray-400">
                        还没有账号? <a href="#" class="font-medium text-purple-400 hover:text-purple-300">立即注册</a>
                    </p>
                </div>
            </div>
        </div>
    </div>


    <script src="./jquery-3.7.1.min.js"></script>
    <!-- 动画脚本 -->
    <script>
        document.querySelectorAll('.animate-blob').forEach(blob => {
            blob.style.animation = `blob 7s infinite`;
        });

        document.querySelectorAll('.animation-delay-2000').forEach(blob => {
            blob.style.animationDelay = '2s';
        });

        document.querySelectorAll('.animation-delay-4000').forEach(blob => {
            blob.style.animationDelay = '4s';
        });
    </script>

    <script>
        // 登录逻辑
        $(function () {
            // 绑定按钮点击事件
            $("button").click(login);

            // 添加回车提交支持
            $(document).keypress(function (e) {
                if (e.which == 13) login();
            });
        });
        function login(event) {
            event.preventDefault(); // 阻止默认行为
            const username = $("#userName").val().trim();
            const password = $("#password").val().trim();

            if (!username || !password) {
                alert("用户名和密码不能为空");
                return;
            }
            $.ajax({
                type: "post",
                url: "/user/login",
                contentType: "application/json",
                data: JSON.stringify({
                    userName: username,
                    password: password
                }),

                success: function (result) {
                    console.log("userName" + userName);
                    console.log("password" + password);

                    console.log(result);
                    if (result != null && result.code == 200 && result.data != null) {
                        //存储后端返回的token值
                        //前端可以存储在cookie，也可以存在localstorage中
                        let userInfo = result.data;
                        localStorage.setItem("user_id", userInfo.userId);
                        localStorage.setItem("user_token", userInfo.token);
                        //登录成功：跳转
                        location.href = "index.html"
                    }
                    else {

                        alert(result.errMsg);
                        if(result.errMsg == "用户不存在"){
                            $("#userName").val("");
                        }
                        else if(result.errMsg == "密码错误"){
                            $("#password").val("");
                        }
                    }
                }
            });
        }




        // JavaScript部分
        const passwordInput = document.getElementById('password');
        const toggleButton = document.getElementById('togglePassword');

        // 鼠标按下时显示密码
        toggleButton.addEventListener('mousedown', () => {
            passwordInput.type = 'text';
        });

        // 鼠标松开或离开时隐藏密码
        toggleButton.addEventListener('mouseup', () => {
            passwordInput.type = 'password';
        });

        toggleButton.addEventListener('mouseleave', () => {
            passwordInput.type = 'password';
        });

        // 可选：防止拖动时保持显示状态
        toggleButton.addEventListener('dragstart', (e) => {
            e.preventDefault();
        });
    </script>
    <style>
        @keyframes blob {

            0%,
            100% {
                transform: translate(0, 0) scale(1);
            }

            25% {
                transform: translate(20px, -30px) scale(1.1);
            }

            50% {
                transform: translate(-10px, 20px) scale(0.9);
            }

            75% {
                transform: translate(-20px, -10px) scale(1.05);
            }
        }
    </style>
</body>

</html>